<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="app-container">
      <el-card
        v-loading="listLoading"
        class="table-card-box"
        shadow="never"
        style="margin-top: -3px"
        :class="{ 'loading-box': listLoading }"
        element-loading-text="加载中"
      >
        <el-button
          type="warning"
          class="customer-add-btn"
          @click="handleTemplate()"
        >新增模板</el-button>
        <el-table
          :data="templateList"
          style="width: 100%; margin-bottom: 30px"
          stripe
        >
          <div
            v-show="
              (!templateList || templateList.length <= 0) &&
                !listLoading
            "
            slot="empty"
          >
            <img
              src="@/icons/pic-kong.png"
              alt="img"
              style="margin-top: 20px; width: 25%; height: 25%"
            />
            <p style="margin-top: -20px; padding-bottom: 0px">这里空空如也</p>
          </div>
          <el-table-column
            prop="templateType"
            label="模板类型"
            width="154"
            :formatter="formatTemplateType"
          >
          </el-table-column>
          <el-table-column
            prop="transportType"
            label="运送类型"
            width="150"
            :formatter="formatTransportType"
          >
          </el-table-column>
          <el-table-column
            prop="associatedCityList"
            label="关联城市"
            width="150"
            :formatter="formatAssociatedCityList"
          >
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
            width="171"
          >
          </el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
            width="171"
          >
          </el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
            width="171"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template v-slot="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="handleTemplate(row)"
              >编辑</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="danger"
                :underline="false"
                @click="delTemplate(row.id)"
              >删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 模板弹窗 -->
    <TemplateDialog
      ref="templateDialog"
      class="add-form-dialog"
      @updateFreightTemplateList="getTemplateList"
    />
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import TemplateDialog from './components/freight-add.vue'
export default {
  components: {
    TemplateDialog
  },
  data() {
    return {
      listLoading: true,
      templateList: []
    }
  },
  created() {
    this.getTemplateList()
  },
  methods: {
    async getTemplateList() {
      this.listLoading = true
      const res = await freightManageList()
      this.templateList = res.data
      this.listLoading = false
    },
    formatTemplateType(row) {
      switch (row.templateType) {
        case 1:
          return '同城寄'
        case 2:
          return '省内寄'
        case 3:
          return '经济区互寄'
        case 4:
          return '跨省'
        default:
          return ''
      }
    },
    formatTransportType(row) {
      switch (row.transportType) {
        case 1:
          return '普快'
        case 2:
          return '特快'
        default:
          return ''
      }
    },
    formatAssociatedCityList(row) {
      return row.associatedCityList.map((item, index) => {
        switch (item) {
          case '1':
            item = '全国'
            break
          case '2':
            item = '京津冀'
            break
          case '3':
            item = '江浙沪'
            break
          case '4':
            item = '川渝'
            break
          case '5':
            item = '黑吉辽'
            break
          default:
            item = ''
            return
        }

        if (index < row.associatedCityList.length - 1) return item + ','
        else return item
      })
    },
    handleTemplate(row) {
      if (row) {
        // 编辑模板
        this.$refs.templateDialog.getFreightTemplateDetail(row)
      }
      this.$refs.templateDialog.openDialog()
    },
    async delTemplate(id) {
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await freightManageDelete(id)
          this.$message.success('删除模板成功')
          this.getTemplateList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
}
</style>
